<template>
  <div>
    <!-- {{ userInfo }} -->
    <div class="titleBox havePadding" v-if="!showSelect">
      <div class="department-name">
        <span class="titleName first">VTE系统 </span>
      </div>
      <!-- 右边 -->
      <div class="right-regulate noToken" @click="Close">
        <span class="noName">VTE综合管理</span>
        <div class="overarm"></div>
      </div>
    </div>

    <div class="titleBox" v-if="showSelect">
      <div class="department-name">
        <span class="titleName second">VTE综合管理 </span>
        <div>
          <el-select
            v-model="selected"
            placeholder="请选择科室"
            :clearable="true"
            :filterable="true"
            size="small"
            multiple
            @change="change"
            @clear="clear"
            class="selectBox"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.deptName"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right-regulate haceToken" @click="isExit">
        <span class="loginNme">{{ relaName }}</span>
        <img :src="exitImage" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { ipcRenderer } from "electron";
import { adminList } from "../../api/login";
import exitImage from "@/assets/exit.png";
import Vue from "vue";
const { app } = require("electron");
const path = require("path");
const fs = require("fs");

export default {
  name: "TITLE",
  props: {
    showSelect: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      userInfo: {},
      exitImage: exitImage, //退出照片
      relaName: "请登录",
      selected: [],
      mix: false,
      IsUseSysTitle: false,
      isNotMac: process.platform !== "darwin",
      IsWeb: process.env.IS_WEB,
      showTitle: true,
      options: [],
    };
  },
  mounted() {
    // 获取用户信息
    setTimeout(()=>{
      this.getUserInfo();
    },600)
    ipcRenderer.invoke("IsUseSysTitle").then((res) => {
      this.IsUseSysTitle = res;
    });
    ipcRenderer.on("w-max", (event, state) => {
      this.mix = state;
    });
  },

  methods: {
    // 选择的数据
    change(val) {
      this.$emit("changeSelect", val);
      // console.log(val, "选择的数据");
    },
    // 清空的数据
    clear() {
      console.log("清空的数据");
      this.$emit("clearSelect");
    },

    Mini() {
      ipcRenderer.invoke("windows-mini");
    },
    MixOrReduction() {
      ipcRenderer.invoke("window-max").then((res) => {
        this.mix = res.status;
      });
    },
    Close() {
      ipcRenderer.sendSync("close-win", { closeSmall: true });
    },
    administrative() {
      adminList().then((res) => {
        this.options = res;
        if (this.userInfo) {
          //数组的交集
          let list = this.disposeArray(this.options);
          list.forEach((item) => {
            this.selected.push(item.id);
          });
          // this.$emit("changeSelect", this.selected);
          // console.log(this.selected, "显示东西");
        }
        // console.log(this.options, this.selected, "显示东西");
      });
    },
    disposeArray(options) {
      this.relaName = this.userInfo.real_name;
      let userInfo = this.userInfo.dept_id.split(",");
      // console.log(this.relaName, userInfo, '列表数据')
      return [...new Set(options)].filter((item) => {
        return userInfo.includes(item.id);
      });
    },
    checkToken() {
      const token = localStorage.getItem("token");
      return token !== null;
    },
    isExit() {
      if (!this.userInfo) {
        this.$emit("exitLogin");
        return;
      }

      this.$confirm("是否退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          localStorage.clear();
          // console.log(res, "1111取消-----------");
          this.$message({
            type: "success",
            message: "退出成功，请重新登录!",
          });
          this.selected = [];
          this.relaName = "请登录";
          this.userInfo = false;
          this.$emit("refreshTitle");
        })
        .catch((err) => {
          console.log(err, "取消-----------");
        });
    },
    getUserInfo() {
      let token = localStorage.getItem("token");
      if (token) {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.administrative(); //科室数据列表
      } else {
        this.userInfo = false;
        this.administrative(); //科室数据列表
      }
      // fs.readFile('data.json', 'utf8', (err, data) => {
      //   if (err) {
      //     this.userInfo = false
      //   } else {
      //     this.userInfo = JSON.parse(data)
      //   }
      // })
    },
  },
  destroyed() {
    ipcRenderer.removeAllListeners("w-max");
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}

.department-name {
  display: flex;
  align-items: center;
  line-height: 69px;
}

.titleName {
  color: #0062ff;
}

.first {
  font-family: YouSheBiaoTiHei;
  font-size: 34px;
  line-height: 34px;
  letter-spacing: 1px;
  font-style: normal;
}

.second {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: bold;
  font-size: 20px;
  color: #0062ff;
  line-height: 20px;
  font-style: normal;
}

.loginNme {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 400;
  color: #333333;
  font-style: normal;
}

.noName {
  font-family: MicrosoftYaHei, MicrosoftYaHei;
  font-weight: bold;
  color: #333333;
  font-style: normal;
}

.right-regulate {
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  > span {
    font-size: 20px;
  }

  img {
    width: 20px;
    height: 20px;
  }
}

.haceToken {
  width: 100px;
}

.noToken {
  width: 175px;
}

.havePadding {
  padding: 0 22px;
  height: 69px;
}

.overarm {
  // margin-right: 20px;
  width: 26px;
  height: 4px;
  border-radius: 10px;
  background: #7f8693;
}

.selectBox {
  width: 272px;
  margin-left: 20px;
  margin-top: 25px;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
<style scoped>
::v-deep.el-select__tags {
  /* background-color: aqua; */
  flex-wrap: nowrap !important;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>